import { ArrowLeftOutlined } from '@ant-design/icons'
import { Card, List, message, Image } from 'antd'
import Item from 'antd/lib/list/Item'
import React, { Component } from 'react'
import { Link, Redirect } from 'react-router-dom'
import { getinfo } from '../../api/index'
import memoryUtils from '../../utils/memoryUtils'
export default class Detail extends Component {
  state = {
    categoryname: '',
    pCategoryname: '',
    loading: true
  }
  async componentDidMount() {
    const state = memoryUtils.product
    if (state._id === undefined) {
      return
    }
    const results = await Promise.all([getinfo(state.pCategoryId), getinfo(state.categoryId)])
    if (results[0].status === 0 && results[1].status === 0) {
      this.setState({ pCategoryname: results[0].data.name, categoryname: results[1].data.name, loading: false })
    } else {
      message.error('分类获取失败')
    }
  }

  render() {
    if (memoryUtils.product._id === undefined) {
      return <Redirect to='/product' />
    }
    const { loading } = this.state
    const state = memoryUtils.product
    console.log(memoryUtils);
    const title = (
      <span><Link to={{ pathname: '/product', state: { pageNum: state.pageNum, pageSize: state.pageSize } }}><ArrowLeftOutlined /></Link>&nbsp;&nbsp;&nbsp;商品详情</span>
    )
    return (
      <Card title={title} loading={loading}>
        <List itemLayout='vertical'>
          <Item><span>商品名称：{state.name}</span></Item>
          <Item><span>商品描述：{state.desc}</span></Item>
          <Item ><span>商品价格：{state.price}</span></Item>
          <Item><span>所属分类：{this.state.pCategoryname + '-->'}{this.state.categoryname}</span></Item>
          <Item><span>商品图片：{
            state.imgs.length > 0 ? (<Image width={150} src={'http://localhost:5000/upload/' + state.imgs} />) : null
          }</span>
          </Item>
          <span>商品详情：</span>
          <Item><div dangerouslySetInnerHTML={{ __html: state.detail }}></div></Item>
        </List>
      </Card>
    )
  }
}
